<template>
  <div class="dialog">
    <el-dialog title="检验详情" :visible.sync="showDialog" width="75%" top="0" :close-on-click-modal="false" @close="cancel">
      <el-form :model="formData" class="el-form">
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="码单号： " props="recordCode" class="w100p">
              <el-input v-model="completeInfoObject.recordCode" clearable placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="检验范畴： " class="w100p">
              <el-select filterable clearable v-model="checkType" multiple @change="handleTableData" filterable clearable>
                <el-option v-for="(item, index) in tempCheckType" :key="index + 'tempCheckType'"
                  :label="item.categoryTypeStr" :value="item.categoryType" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="供应商： " class="w100p">
              <el-input v-model="formData.a" clearable placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="入塘塘号： " class="w100p">
              <el-select filterable clearable v-model="fishPondId" filterable clearable>
                <el-option v-for="(item, index) in fishPondList" :key="index + 'fishPond'" :label="item.pondName"
                  :value="item.fishPondId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="5">
            <el-form-item label="入塘批次： " class="w100p">
              <el-select filterable clearable v-model="completeInfoObject.productionBatchId" @change="querySpecByBatch"
                value-key="productionBatchId" filterable clearable>
                <el-option v-for="(item, index) in batchList" :key="index + 'batchObj'"
                  :label="`${item.mnecode}_${item.varietyName}`" :value="item.productionBatchId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="规格比例： " class="w100p">
              <div v-for="(item, index) in specificationList" :key="index">
                <!-- <span></span> -->
                <el-input v-model="specificationList[index].proportion" clearable placeholder
                  style="width:150px;margin-right:10px;">
                  <template slot="prepend">{{ item.specificationName }}</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="总重量： " class="w100p">
              <el-input v-model="completeInfoObject.checkNum" clearable placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="条数： " class="w100p">
              <el-input v-model="completeInfoObject.checkTotalWeight" clearable placeholder />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table ref="tableData" :data="tableData" border :span-method="objectSpanMethod" style="width:100%">
        <el-table-column label="检验范畴" width="200" prop="categoryType" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <div style="width:160px !important"
              :style="'height:' + scope.row.categoryTypecount * 40 + 'px;line-height:' + scope.row.categoryTypecount * 40 + 'px'">
              {{ scope.row.categoryTypeStr }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="checkSubject" width="120" label="检验科目" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="checkStandard" label="检验标准" align="left" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column :show-overflow-tooltip="true" align="center" prop="finallyScore" label="检验结果">
          <template slot-scope="scope" v-if="tableData[scope.$index].checkResult">
            <!-- {{ tableData[scope.$index].whetherResult }} -->
            <div v-if="scope.row.answerType === 'TEXTTYPE'">合格</div>
            <div v-if="scope.row.answerType === 'TWOTERMSTYPE' || scope.row.answerType === 'LISTTYPE'">
              {{ tableData[scope.$index].checkResult === tableData[scope.$index].standardValue ? '合格' : '不合格' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="result" align="center" :show-overflow-tooltip="true" label="检验人">
          <template slot-scope="scope">
            <el-form :model="formData" class="el-form">
              <div class="w100p">检验人：{{ scope.row.staffName }}</div>
              <div class="w100p">检验时间：{{ scope.row.checkTime }}</div>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import BatchMangeApi from "@/api/batch-mange";
import FishPondApi from "@/api/basic-info-manage/fishPond";
import SpecificationApi from "@/api/basic-info-manage/specification";
import StaffApi from "@/api/basic-info-manage/staff";
import { mapGetters } from "vuex";
import { mymixin } from "@/utils/mixin";
export default {
  name: "",
  components: {},
  mixins: [mymixin],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    completeInfoObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
  },
  data () {
    return {
      fishPondId: '',
      formData: {},
      tableData: [],
      specificationList: [],
      fishPondList: [],//
      batchList: [],//
      tempCheckType: [],//用于存储检验配置的检验范畴
      recordList: [],//当前选中的检验范畴
      checkType: [],//当前选中的检验范畴
      currentBatchId: 1,
      showDialog: this.show
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
  },
  watch: {
    show (v) {
      this.showDialog = v;
    },
    completeInfoObject (v) {
      console.log(v);
      this.specificationList = v.checkRecordSpecificationMapperList
      this.tableData = this.listHandle(v.checkRecordInfoList)
      v.checkRecordStaffMapperList.forEach((item, index) => {
        this.tableData.forEach(tableDataItem => {
          if (item.categoryTypeList.findIndex(categoryTypeItem => categoryTypeItem === tableDataItem.categoryType) !== -1) {
            tableDataItem.checkTime = item.checkTime
            tableDataItem.staffName = item.staffName
          }
        })
      })
      console.log(this.tableData);
      BatchMangeApi.queryById({ id: v.productionBatchId }).then(res => {
        this.fishPondId = res.data.fishPondId
      })
    },
  },
  created () { },
  mounted () {
    this.queryFishPond()
    this.queryBatch()
  },
  methods: {
    //查询可选鱼塘
    queryFishPond () {
      FishPondApi.queryByCondition().then(res => {
        this.fishPondList = res.data;
      });
    },
    // 查询鱼塘下的批次
    queryBatch (e) {
      BatchMangeApi.queryByCondition({}).then(res => {
        this.batchList = res.data;
      });
    },
    querySpecByBatch (item) {
      this.formData.productionBatchId = item.productionBatchId;
      SpecificationApi.queryByCondition({
        fishVarietyId: item.fishVarietyId
      }).then(res => {
        this.specificationList = res.data;
      });
    },
    handleTableData (e) {
      this.checkRecordStaffMapperList[0].categoryTypeList = this.checkType
      this.tableData = []
      this.originalCheckConfigDetailList.forEach((item, index) => {
        if (this.checkType.findIndex((item2) => item2 === item.categoryType) !== -1) {
          this.tableData.push(item)
        }
      })
    },
    // -----单元合并处理相关-------
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 找到第一列
      if (columnIndex === 0 || columnIndex === 4) {
        // 如果合并的个数大于1的话
        if (row.categoryTypecount >= 1) {
          return {
            rowspan: row.categoryTypecount,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 转化下请求回来的数据
    listHandle (list) {
      for (var key in list[0]) {
        if (key === "categoryType") {
          var k = 0;
          var j = 0;
          while (k < list.length) {
            list[k][key + "count"] = 1;
            list[k][key + "number"] = j;
            for (var i = k + 1; i <= list.length - 1; i++) {
              if (list[k][key] === list[i][key] && list[k][key] !== "") {
                list[k][key + "count"]++;
                list[i][key + "count"] = 0;
                list[i][key + "number"] = j;
              } else {
                break;
              }
            }
            j++;
            k = i;
          }
        }
      }
      return list;
    },
    changeCurrentPage (currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    close () {
      this.$emit("closeDialog");
    },
    cancel () {
      this.$emit("cancelDialog");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input-group__prepend {
  background-color: #c9e9ff;
  padding: 5px;
}

// 单元格样式
::v-deep .el-table {
  position: relative;
}

::v-deep .el-table__body {
  height: auto !important;
}

::v-deep {
  .common-layout {
    height: calc(100% - 140px) !important;

    .content {
      overflow: auto;
    }
  }
}

.text_ellipsis {
  white-space: pre-wrap;
  width: 80px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}

::v-deep .el-table .hang {
  background: #970b84;
  font-weight: bold;
  //   color:#bd1a1a;
}

// 表格hover及选中样式
::v-deep .el-table tr:hover,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td,
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
::v-deep .el-table__body tr.current-row>td {
  background-color: #15a0ca00 !important;
}

// el-form
::v-deep .el-form {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  width: 100%;

  .el-form-item__label {
    color: #000;
    white-space: nowrap;
    font-size: 14px;
    min-width: 80px;
    text-align: end;
  }
}

::v-deep .el-form-item--medium {
  display: flex;
  margin-bottom: 0;
  padding: 10px;

  .el-form-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    line-height: 36px;

    >span {
      white-space: nowrap;
      min-width: 50px;
      text-align: end;

      color: #000;
    }

    .el-input {
      width: 100%;
    }
  }

  .el-form-item__label {
    line-height: 36px;
  }
}

::v-deep {
  .el-row {
    width: 100%;
    border: #000 1px solid;
    border-bottom-width: 0;

    &:last-child {
      border-bottom-width: 1px;
    }

    .el-col {
      border: #000 1px solid;
      border-bottom-width: 0;
      border-right-width: 0;
      border-top-width: 0;

      &:first-child {
        border-left-width: 0;
      }
    }
  }
}
</style>
